<template>
  <div class="playlist-edit">
    <div class="flex text-sm border-b-1 pb-2">
      <router-link
          :to="{ path: 'createdPlaylist', query: {id: route.query.id} }"
          class="yu-textColor-hover"
      >
        {{ store.listPlaylistDetails.name }}
      </router-link>
      <span class="mr-2 ml-2 yu-titleColor"> > </span>
      <span>编辑歌单</span>
    </div>
    <div class="mt-2  flex">
      <div class="flex w-120 flex-col">
        <van-cell-group inset>
          <van-field v-model="playlistName" label="歌单名" name="name" placeholder="请输入歌单名"/>
          <van-field name="tags" label="标签">
            <template #input>
              <div
                  v-for="(item, index) in tags"
                  :key="index"
                  class="text-xs yu-bgColor-hover-only border-1 rounded-sm mr-2 flex items-center flex-wrap"
              >
                <span class="ml-1 mr-1">{{ item }}</span>
              </div>
              <span class="yu-titleColor yu-textColor-hover" @click="dialogPopupFn">选择标签</span>
            </template>
          </van-field>
          <van-field
              v-model="description"
              rows="4"
              autosize
              label="介绍"
              type="textarea"
              maxlength="1000"
              show-word-limit
          />
        </van-cell-group>
        <YuButton margin="10px auto 0" padding="0" style="width: 100px; " @click="savePlaylist">
          保存
        </YuButton>
      </div>
      <edit-pic/>
    </div>
    <van-dialog class="text-black" width="400px" v-model:show="dialogParams" title="选择标签" show-cancel-button>
      <div class="h-80 overflow-y-scroll mt-4 pl-2 pr-2">
        <div v-for="(item, index) in allTags" :key="index" class="flex">
          <span class="mr-2 ">{{ item.title }}:</span>
          <ul class="grid grid-cols-3 mb-2 flex-1">
            <li
                v-for="(tag, tagI) in item.sub"
                :key="tagI"
                class="mb-1 p-2 mr-1 ml-1 yu-bgColor-one-only cursor-pointer relative"
                @click="addTags(tag.name)"
            >
              <span>{{ tag.name }}</span>
              <van-icon name="success" class="van-icon" v-if="tags.includes(tag.name)"/>
            </li>
          </ul>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import {Dialog, Toast} from 'vant'
import 'vant/es/dialog/style';
import YuButton from '@/components/YuButton/index.vue'
import {useRoute, useRouter} from "vue-router";
import {useStore} from "@/store/index";
import {onMounted, reactive, ref, toRefs, watchEffect} from "vue";
import {getPlaylistDescUpdate, getPlaylistNameUpdate, getPlaylistTagsUpdate} from "@/api/radio/index";
import EditPic from './components/EidtPic/index.vue'
import {getPlaylistUpdate} from "../../../../api/radio/index.js";

const route = useRoute()
const store = useStore()
const router = useRouter()
// 使用弹窗
const VanDialog = Dialog.Component;

const data = reactive({
  playlistName: '', // 歌单名称
  description: '', // 介绍
  tags: [], // 标签
  dialogParams: false, // 弹窗
  allTags: [], // 全部标签
})

const {playlistName, description, tags, dialogParams, allTags} = toRefs(data)

// 获取编辑表单的信息
onMounted(async () => {
  await store.clickGetPlaylistDetail(route.query.id)
})

// 获取歌单标签
store.getPlaylistCatlist().then(res => {
  data.allTags = res.categories
})

watchEffect(() => {
  // 显示歌单原来的信息
  data.playlistName = store.listPlaylistDetails.name
  data.description = store.listPlaylistDetails.description
  data.tags = store.listPlaylistDetails.tags
})

// 标签弹窗
const dialogPopupFn = () => {
  data.dialogParams = true
}
// 临时存储tags
const addTags = (name) => {
  // 判断当前数组中是否存在这个标签
  const i = data.tags.indexOf(name)
  // 如果存储就通过下标将其删除
  if (i !== -1) delete data.tags.splice(i, 1)
  else if (data.tags.length < 3) data.tags.push(name) // 最多存储三个
}

// 保存填写的信息
const savePlaylist = () => {
  // 更新歌单信息
  getPlaylistUpdate({
    id: route.query.id,
    desc: data.description,
    name: data.playlistName,
    tags: data.tags[0]
  }).then(res => {
    Toast('更新成功(标签只支持一个)');
  })
}
</script>

<style scoped lang="scss">
.van-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #1aff00;
  font-size: 18px;
}
</style>
